import React, { useState } from 'react';  
import C from './InputGroup.module.css';
  
// 辅助输入框组件  
const AuxiliaryInput = ({ index, onDelete }) => {  
  const [value, setValue] = useState('');  
  
  return (  
    <div className={C.zhuliao_content}>    
      <input type="text" value={value} onChange={e => setValue(e.target.value)} />    
      {/* 移除了 index > 0 的条件，现在每个输入框后面都会有一个 '-' 按钮 */}  
      <button onClick={() => onDelete(index)}>-</button>    
    </div>  
  );  
};  
  
// 输入框组组件  
const InputGroup = () => {  
  const [showInputs, setShowInputs] = useState(false); // 控制是否显示辅助输入框  
  const [inputs, setInputs] = useState(Array.from({ length: 3 }, (_, i) => '')); // 默认三个输入框的值  
  
  // 添加输入框  
  const addInput = () => {  
    setInputs([...inputs, '']);  
  };  
  
  // 删除输入框  
  const deleteInput = index => {  
    setInputs(inputs.filter((_, i) => i !== index));  
  };  
  
  // 切换显示隐藏辅助输入框  
  const toggleInputs = () => {  
    setShowInputs(!showInputs);  
  };  
  
  return (  
    <div className={C.zhuliao_text}>   
      <button onClick={toggleInputs} className={C.zhuliao}>主料</button>  
      {showInputs && (  
        <div>  
          {inputs.map((value, index) => (  
            <AuxiliaryInput key={index} index={index} onDelete={deleteInput} />  
          ))}  
          {inputs.length > 0 && (  
            <button onClick={addInput}>+</button>  
          )}  
        </div>  
      )}  
    </div>  
  );  
};  
  
export default InputGroup;